<template>
  <div class="mindmap">
    <svg class="markmap" ref="svgRef" />
  </div>

</template>

<script lang="ts" setup>
import { ref, onMounted, onUpdated } from 'vue';
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view';

const transformer = new Transformer();

const mm = ref()
const value = ref('')
const svgRef = ref()
const props = defineProps({
  initValue: {
    type: String,
    required: false,
    default: ''
  },
})


const update = () =>{
  const { root } = transformer.transform(props.initValue);
  mm.value.setData(root);
  mm.value.fit();
}
onMounted(()=>{
  // 初始化markmap思维导图
  mm.value = Markmap.create(svgRef.value);
  // 更新思维导图渲染
  update();
})
onUpdated(update);
</script>

<style lang="scss" scoped>
.mindmap {
  width: 100%;
  height: 100%;
  svg {
    width: 100%;
    height: 100%;
  }

}
.markmap {
  --markmap-max-width: none;
  --markmap-a-color: #0097e6;
  --markmap-a-hover-color: #00a8ff;
  --markmap-code-bg: #f0f0f0;
  --markmap-code-color: #555;
  --markmap-highlight-bg: #ffeaa7;
  --markmap-table-border: 1px solid currentColor;
  --markmap-font: 300 16px / 20px sans-serif;
  font: var(--markmap-font);
}
</style>